<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="num++">+</button>
        <q-header :a="num" title="购物车"></q-header>
        <!-- <q-header :a="num" title="商品列表"></q-header> -->

        <hr />
        <button @click="num1++">+</button>
        <q-footer a1="抓了" :b="num1" c="只" title1="娃娃"></q-footer>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const {createApp,ref,computed} = Vue;
    const app = createApp({
        setup(){
            let num = ref(3)
            let num1 = ref('0')
            return{
                num,
                num1
            }
        }
    })
    app.component('q-header',{
        // props:['a','title'],
        // props:{
        //     a:[Number,String],
        //     title:[Number,String]
        // },
        props:{
            a:{
                type:[Number,String],
            required:false,
            default:111,
            validator(val){
                console.log(val);
                if(val%2===1){
                    return true
                }else{
                    return false
                }
            }
            },
            title:[Number,String]
            
        },
        setup(props){
            let title = props.title;
            let a = computed(function(){
                return props.a
            })
          return{
            title,
            a
          }  
        },
        template:`<div class="header">
            {{a}}
            {{title}}</div>`
    })

    app.component('q-footer',{
        props:{
            a1:String,
            c:String,
            b:{
                type:[Number,String],
                required:true,
            // default:111,
            validator(val){
                console.log(val);
                if(val<=5){
                    return true
                }else{
                    throw new Error('限量5只')
                    return false
                }
            }
            },
            title1:String
        },
        setup(props){
            let a1 = props.a1
            let c = props.c
            let title1 = props.title1
            let b = computed(function(){
                return props.b
            })
            return{
                a1,
                b,
                c,
                title1
            }
        },
        template:`<div class="footer">
            {{a1}}
            {{b}}
            {{c}}
            {{title1}}</div>`
    })
    app.mount('#app')
</script>
</html>